<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>move方格</title>
    </head>
    <style type="text/css">
        canvas{border:solid 2px #CCC;}
        #nav{margin: 20px auto;text-align:center;}
    </style>
    <script type="text/javascript">
    var box_width = 20;
    var bx=1,by=1;
    var can_width=1320,can_height=200;
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        document.getElementById('can').width = can_width ;
        document.getElementById('can').height = can_height ;
        Draw(bx,by);
    }
    function Draw(bx,by){
        var can = $$('can');
        var ctx = can.getContext('2d');
        ctx.clearRect(0,0,can_width,can_height);
        for(var x=0.5;x< can_width;x += box_width){
            ctx.moveTo(x,0);
            ctx.lineTo(x,can_height);
        }
        for(var y=0.5;y< can_height;y += box_width){
            ctx.moveTo(0,y);
            ctx.lineTo(can_width,y);
        }
        ctx.strokeStyle='#bbb';
        ctx.fillRect(box_width * bx,box_width * by,box_width,box_width);
        ctx.fillStyle='#111';
        ctx.stroke();
    }
    function noNumbers(e)
    {
        var keynum,keychar;
        keynum = window.event ? e.keyCode : e.which;
        keychar = String.fromCharCode(keynum);
        //alert(keynum+'-->'+keychar);
        switch(keynum){
            case 37: bx-=1; break; //如果按下左键：
            case 38: by-=1; break; //上键
            case 39: bx+=1; break; //右键
            case 40: by+=1; break; //下键
            //case 37: bx-=1; break;
        }
        Draw(bx,by);
    }
    </script>
    <body onload="pageLoad();" onkeydown="return noNumbers(event)">
    <div id="nav">
        <canvas id="can" width="1200px" height="480px">4</canvas>
        <!-- <input type="text" /> -->
    </div>
    </body>
</html>